<template>
  <div class="mine">
    <van-nav-bar title="我的">
      <template #left>
        <van-icon name="apps-o" @click='showpo' size="18" color="#333" />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="18" color="#333" />
      </template>
    </van-nav-bar>


    <!-- 用户信息 -->
    <router-link to="/personal">
      <ul class="yonghu">
        <img :src="profile.avatarUrl" class="img" />
        <li>
          <h3>{{ profile.nickname }}</h3>
          <p>Lv:{{ profil.level }}</p>
        </li>
      </ul>
    </router-link>

    <!-- 九宫格 -->
    <van-grid square class="conc">
      <van-grid-item icon="music-o" text="本地/下载" />
      <van-grid-item icon="upgrade" text="云盘" />
      <van-grid-item icon="sign" text="已购" />
      <van-grid-item icon="play-circle-o" text="最近播放" />
      <van-grid-item icon="friends-o" text="我的好友" />
      <van-grid-item icon="star-o" text="收藏和赞" />
      <van-grid-item icon="bullhorn-o" text="电竞专区" />
      <van-grid-item icon="service-o" text="DJ专区" />
    </van-grid>

    <!-- 我的喜欢 -->

    <div class="wdx" @click="skip()">
      <van-image class="img" width="60" height="60" :src="list.picUrl" />
      <ul>
        <li>我喜欢的音乐</li>
        <span>{{ lis.length }}首</span>
      </ul>
      <p class="like"><van-icon name="like-o" /><span>心动模式</span></p>
    </div>

    <!-- 导航跳转 -->
    <div class="col">
      <router-link :to="{ name: 'creatlist', params: { id: 1 } }">
        <p style="color: black">创建歌单</p>
      </router-link>
      <router-link :to="{ name: 'liststar', params: { id: 2 } }">
        <p style="color: black">收藏歌单</p>
      </router-link>
      <router-link :to="{ name: 'listhelper', params: { id: 3 } }">
        <p style="color: black">歌单助手</p>
      </router-link>
    </div>

    <!-- 推荐歌单 -->

    <div class="songbox">
      <p>推荐歌单<van-icon name="replay" color="red" @click="hhp" /></p>
      <div class="songlist">
        <div class="songimgbox" v-for="objs in result" :key="objs.id">
          <div class="songtag">
            <img
              :src="objs.picUrl"
              :title="objs.name"
              @click="detail(objs.id)"
            />
          </div>
          <p>{{ objs.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  WdxihAPi,
  WWdxihAPI,
  recommendAPI,
  userinfodAPI,
} from "../../api/wdxh";

import { Toast } from "vant";

export default {
  data() {
    return {
      list: [],
      lis: [],
      result: [],
      profile: [],
      profil: [],
      limit: 10,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //  全局事件总线
    showpo(){
      this.$bus.$emit('showPopup')
    },
    //获取用户信息
    async userinfod() {
      //获取本地储存uid
      let id = localStorage.getItem("uid");
      const surse = await userinfodAPI(id);
      this.profile = surse.profile;
      this.profil = surse;

      console.log(surse);
    },


    //推荐歌单
    async recommen() {
      const sruse = await recommendAPI(10);
      console.log(sruse);
      this.result = sruse.result;
      console.log(this.result);
      // console.log(this.result.shift(0, 20));
    },

    //刷新推荐歌单
    async hhp() {
      console.log(this.limit);
      const sruse = await recommendAPI(100);
      console.log(sruse);
      this.result = sruse.result.splice(this.limit, 10);

      this.limit = this.limit + 10;
      if (this.limit == 100) {
        this.limit = 10;
      }
    },

    //歌单列表id
    async ood(ids) {
      const rustr = await WdxihAPi(ids);
      console.log(rustr);
      this.rustr = rustr.ids;
      const res2 = await WWdxihAPI(this.rustr.join(","));
      this.list = res2.songs[0].al;
      this.lis = res2.songs;
      // console.log(this.list);
    },

    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    //点击喜欢跳转
    skip() {
      this.$router.push({
        path: `/mylove/${this.list.id}`,
      });
    },

    //跳转歌单详情
    detail(id) {
      console.log(id);
      this.$router.push(`/Songlistdetail/${id}`);
    },
  },
  created() {
    let uid = localStorage.getItem("uid");
    //调用我的喜欢
    this.ood(uid);
    //调用推荐歌单
    this.recommen();

    this.userinfod();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.mine {
  margin-bottom: 50px;
}
.conc {
  width: 94%;
  margin: 15px auto;
}

/* 我喜欢的音乐 */
.wdx {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 95%;
  margin: 0 auto;
  height: 70px;
  background-color: #ffffff;
  border-radius: 15px;
  margin-bottom: 20px;
}
.wdx .img {
  border-radius: 5px;
  margin-left: 5px;
  padding: 5px;
}
.wdx ul {
  flex: 1;
}
.wdx ul li {
  margin-bottom: 8px;
}

.wdx .like {
  width: 90px;
  height: 25px;
  line-height: 25px;
  border: 1px solid #666;
  text-align: center;
  border-radius: 20px;
  margin-right: 10px;
}
/* 导航跳转 */
.col {
  display: flex;
  width: 95%;
  margin: 0 auto;
  height: 50px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-around;
}
.objsl {
  display: flex;
}

.objsl .ccl {
  width: 100px;
  height: 100px;
}

.songbox {
  width: 95%;
  margin: 0 auto;
  height: 180px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid #cccccc;
}
.songbox > p {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
.songlist-webkit-scrollbar {
  width: 0;
}
.songimgbox {
  text-align: center;
  width: 100px;
  height: 100px;
  font-size: 12px;
  margin-left: 10px;
}
.songtag {
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}
.songtag img {
  width: 100px;
  height: 100px;
}
.songimgbox p {
  width: 100px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.songlist {
  width: 100%;
  height: 140px;
  display: flex;
  overflow-x: scroll;

  /* overflow-x: visible; */
}

.yonghu {
  display: flex;
  width: 95%;
  margin: 0 auto;
  margin-top: 25px;
  height: 50px;
  background-color: #ffffff;
  align-items: center;
  border-radius: 20px;
}
.yonghu .img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin-left: 10px;
}
.yonghu p {
  width: 50px;
  height: 20px;
  line-height: 20px;
  background-color: black;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  margin-top: 5px;
  margin-left: 5px;
}
.yonghu h3 {
  margin-bottom: 5px;
  margin-left: 5px;
}
</style>
